<template>
    <div>
        <navigationBar :backType="2" navigationTitle="订单" />
        <view
            class="wrap-order-status flex"
            :style="'top:' + navigationHeight + 'px;'"
        >
            <block v-for="(item, index) in tab_list" :key="index">
                <view
                    class="status-item flex align-center just-center"
                    @click="onTab(index)"
                >
                    <view :class="{ active: item.status == status }">
                        {{ item.title }}
                    </view>
                </view>
            </block>
        </view>
        <view class="content" v-for="(item, index) in list" :key="index">
            <view class="card" @click="onDetail(item)">
                <view class="item-one flex align-center just-between">
                    <view class="order-num f-26">
                        订单编号：{{ item.order_sn }}
                    </view>
                    <view class="status f-26">
                        {{ item.status_text2 }}
                    </view>
                </view>

                <view class="item-info flex align-center just-between">
                    <image class="file" :src="item.goods.service_cover" />

                    <view class="info-right">
                        <view class="title fb-30 limit-num-line">
                            {{ item.goods.service_name }}
                        </view>

                        <view class="time f-26 flex align-center just-between">
                            预约时间：{{ item.strattime_text || "--" }}
                            <text class="num f-26">
                                x{{ item.goods.num }}
                            </text>
                        </view>

                        <view
                            class="service-time f-26 flex align-center just-between"
                        >
                            <text> 服务时长：{{ item.time_long }}分钟 </text>
                        </view>
                    </view>
                </view>

                <view class="item-bottom flex align-center just-between">
                    <view class="total-price">
                        <text>总计:</text>
                        <text class="price fb-32">
                            ¥{{ item.total_price }}
                        </text>
                    </view>

                    <view class="btn-bg">
                        <btnFuncs
                            :info="item"
                            :type="1"
                            @onCall="onCall"
                            @onComment="onComment"
                            @onConfirm="onConfirm"
                            @onStart="onStart"
                            @onRefuse="onRefuse"
                            @onChoose="onChoose"
                            @onBegin="onBegin"
                            @onChooseSuccess="onChooseSuccess"
                        ></btnFuncs>
                    </view>
                </view>
            </view>
        </view>
        <uEmpty v-if="list.length === 0" />
        <view class="mask" v-if="showModal" @click="onCancel"></view>
        <view class="model" v-if="showModal">
            <view class="model-title"> {{ modelTitle }} </view>

            <view class="model-content flex" v-if="showStatus == 4">
                <text class="model-tit">拍照打卡：</text>
                <view class="model-upimage">
                    <view class="model-image" v-if="startimg">
                        <image :src="startimg" />
                        <view
                            class="model-upAgin flex column align-center just-center"
                            @click="uploadImage"
                        >
                            <image
                                src="/static/technician/joinUs/agin.png"
                                mode="scaleToFill"
                            />
                            <view class="again f-24">重新上传</view>
                        </view>
                    </view>
                    <image
                        @click="uploadImage"
                        class="model-add"
                        v-else
                        src="/static/technician/joinUs/cuploadimg.png"
                    />
                </view>
            </view>

            <view class="model-content flex" v-if="showStatus == 6">
                <text class="model-tit">拍照打卡：</text>
                <view class="model-upimage">
                    <view class="model-image" v-if="endimg">
                        <image :src="endimg" />
                        <view
                            class="model-upAgin flex column align-center just-center"
                            @click="uploadImage"
                        >
                            <image
                                src="/static/technician/joinUs/agin.png"
                                mode="scaleToFill"
                            />
                            <view class="again f-24">重新上传</view>
                        </view>
                    </view>
                    <image
                        @click="uploadImage"
                        class="model-add"
                        v-else
                        src="/static/technician/joinUs/cuploadimg.png"
                    />
                </view>
            </view>

            <view
                class="model-content flex align-center"
                v-if="showStatus != 2"
            >
                <text class="model-tit">当前地点：</text>
                <text
                    class="model-text"
                    :class="{ col: address == '' }"
                    @click="getLocation"
                >
                    {{ address || "点击获取定位" }}
                </text>
            </view>

            <view class="model-content flex column" v-if="showStatus == 2">
                <textarea
                    class="model-textarea"
                    v-model="refuse_why"
                    placeholder="请输入拒绝原因"
                    maxlength="100"
                ></textarea>
                <text class="model-length">{{ refuse_why.length }}/100</text>
            </view>

            <view class="model-btns flex align-center">
                <view class="model-btnN" @click="onCancel">取消</view>
                <view class="model-btnY" @click="onSure">确定</view>
            </view>
        </view>
    </div>
</template>

<script>
import { technicianGetOrderList } from "@/API/order.js";
import btnFuncs from "./components/btnFuncs.vue";
import { changeOrderStatus } from "@/API/recruit.js";
export default {
    components: {
        btnFuncs,
    },
    data() {
        return {
            navigationHeight: this.$navigationHeight,
            tab_list: [
                {
                    title: "待接单",
                    status: 2,
                },
                {
                    title: "待服务",
                    status: 3,
                },
                {
                    title: "服务中",
                    status: 4,
                },
                {
                    title: "已完成",
                    status: 7,
                },
                // {
                //     title: "取消/拒单",
                //     status: 8,
                // },
            ],
            status: 2, //订单状态
            page: 1,
            total: 0,
            list: [],
            showModal: false,
            showStatus: 0,
            modelTitle: "",
            address: "",
            lat: "", // 出发地纬度
            lng: "", // 出发地经度
            startimg: "",
            endimg: "",
            refuse_why: "",
            order_id: 0,
        };
    },
    onLoad(options) {
        this.status = options.status || 2;
        this.onRefresh();
    },
    onPullDownRefresh() {
        this.onRefresh();
    },
    onReachBottom() {
        if (this.list.length < this.total) {
            this.page++;
            this.getData();
        }
    },
    onShow() {
        this.onRefresh();
    },
    methods: {
        /**
         * 刷新
         */
        onRefresh() {
            this.page = 1;
            this.list = [];
            this.getData();
        },
        /**
         * 网络请求
         */
        getData() {
            technicianGetOrderList(this.status, this.page).then((res) => {
                this.total = res.data.total;
                const list = res.data.data;
                if (this.page === 1) {
                    this.list = list;
                } else {
                    this.list = this.list.concat(list);
                }
                console.log(this.list);
            });
        },
        // tab切换
        onTab(index) {
            this.status = this.tab_list[index].status;
            this.onRefresh();
        },
        // 按钮点击
        onCall(info) {
            uni.makePhoneCall({
                phoneNumber: info.address.mobile.toString(),
            });
        },
        onComment(info) {
            // 评论客户
            uni.navigateTo({
                url: `/subPages/technician/technician/appraiseUser?order_id=${info.id}`,
            });
        },
        onConfirm(info) {
            // 确认接单
            changeOrderStatus({
                order_id: info.id,
                type: 1,
            })
                .then((res) => {
                    this.getData();
                })
                .catch((err) => {
                    uni.showToast({
                        icon: "none",
                        title: err.msg,
                    });
                });
        },
        onStart(info) {
            // 已出发
            this.order_id = info.id;
            this.showStatus = info.status;
            this.modelTitle = "确认出发";
            this.showModal = true;
        },
        onRefuse(info) {
            // 拒绝接单
            this.order_id = info.id;
            this.showStatus = info.status;
            this.modelTitle = "填写拒绝原因";
            this.showModal = true;
        },
        onChoose(info) {
            // 拍照确认到达
            this.order_id = info.id;
            this.showStatus = info.status;
            this.modelTitle = "确认到达";
            this.showModal = true;
        },
        uploadImage() {
            // 上传图片
            uni.chooseImage({
                count: 1,
                sizeType: ["original", "compressed"],
                sourceType: ["album", "camera"],
                success: (res) => {
                    uni.uploadFile({
                        url: "https://www.manmiao.online/api/common/upload",
                        filePath: res.tempFilePaths[0],
                        name: "file",
                        success: (uploadFileRes) => {
                            if (this.showStatus == 4) {
                                this.startimg = JSON.parse(
                                    uploadFileRes.data
                                ).data.fullurl;
                            } else {
                                this.endimg = JSON.parse(
                                    uploadFileRes.data
                                ).data.fullurl;
                            }
                        },
                    });
                },
            });
        },
        onBegin(info) {
            // 开始服务
            changeOrderStatus({
                order_id: info.id,
                type: 4,
            })
                .then((res) => {
                    this.getData();
                })
                .catch((err) => {
                    uni.showToast({
                        icon: "none",
                        title: err.msg,
                    });
                });
        },
        onChooseSuccess(info) {
            // 拍照完成任务
            this.order_id = info.id;
            this.showStatus = info.status;
            this.modelTitle = "确认完成";
            this.showModal = true;
        },
        getLocation() {
            // 获取位置
            uni.chooseLocation({
                success: (res) => {
                    this.address = res.name + res.address;
                    this.lat = res.latitude;
                    this.lng = res.longitude;
                },
            });
        },
        onCancel() {
            this.showModal = false;
            this.showTags = false;
            this.address = "";
            this.startimg = "";
            this.endimg = "";
            this.refuse_why = "";
        },
        onSure() {
            if (this.showStatus == 3) {
                if (this.address == "") {
                    uni.showToast({
                        title: "请选择地址",
                        icon: "none",
                    });
                    return;
                }
                changeOrderStatus({
                    order_id: this.order_id,
                    trip_start_lat: this.lat,
                    trip_start_lng: this.lng,
                    trip_start_address: this.address,
                    type: 2,
                })
                    .then((res) => {
                        this.getData();
                    })
                    .catch((err) => {
                        uni.showToast({
                            icon: "none",
                            title: err.msg,
                        });
                    });
            } else if (this.showStatus == 4 || this.showStatus == 6) {
                if (this.startimg == "" && this.showStatus == 4) {
                    uni.showToast({
                        title: "请拍照确认到达",
                        icon: "none",
                    });
                    return;
                } else {
                    changeOrderStatus({
                        order_id: this.order_id,
                        arrive_img: this.startimg,
                        trip_end_lat: this.lat,
                        trip_end_lng: this.lng,
                        trip_end_address: this.address,
                        type: 3,
                    })
                        .then((res) => {
                            this.getData();
                        })
                        .catch((err) => {
                            uni.showToast({
                                icon: "none",
                                title: err.msg,
                            });
                        });
                }
                if (this.endimg == "" && this.showStatus == 6) {
                    uni.showToast({
                        title: "请拍照确认完成",
                        icon: "none",
                    });
                    return;
                } else {
                    changeOrderStatus({
                        order_id: this.order_id,
                        end_service_img: this.endimg,
                        service_complete_lat: this.lat,
                        service_complete_lng: this.lng,
                        service_complete_address: this.address,
                        type: 5,
                    })
                        .then((res) => {
                            this.getData();
                        })
                        .catch((err) => {
                            uni.showToast({
                                icon: "none",
                                title: err.msg,
                            });
                        });
                }
                if (this.address == "") {
                    uni.showToast({
                        title: "请获取位置",
                        icon: "none",
                    });
                    return;
                }
            } else if (this.showStatus == 2) {
                if (this.refuse_why == "") {
                    uni.showToast({
                        title: "请填写拒绝原因",
                        icon: "none",
                    });
                    return;
                }
                changeOrderStatus({
                    order_id: this.order_id,
                    refuse_why: this.refuse_why,
                    type: -1,
                })
                    .then((res) => {
                        this.getData();
                    })
                    .catch((err) => {
                        uni.showToast({
                            icon: "none",
                            title: err.msg,
                        });
                    });
            }

            this.address = "";
            this.startimg = "";
            this.endimg = "";
            this.refuse_why = "";
            this.showModal = false;
        },
        onDetail(info) {
            uni.navigateTo({
                url: `/subPages/technician/technician/orderDetail?order_id=${info.id}`,
            });
        },
    },
};
</script>

<style lang="scss" scoped>
.content {
    padding: 0 20rpx;
    .item-one {
        width: 100%;
        height: 86rpx;
        border-bottom: 2rpx solid #ececec;

        .order-num {
            color: $title-color;
        }
        .status {
            color: $theme-color;
        }
    }

    .item-info {
        margin-top: 30rpx;
        width: 100%;
        overflow: hidden;

        .file {
            width: 176rpx;
            height: 176rpx;
            border-radius: 10rpx;
            overflow: hidden;
        }

        .info-right {
            margin-left: 20rpx;
            flex: 1;
            overflow: hidden;

            .title {
                color: $title-color;
            }
            .people {
                margin-top: 15rpx;
                color: #a3a3a3;
            }
            .time {
                margin-top: 15rpx;
                color: #a3a3a3;
            }
            .service-time {
                margin-top: 15rpx;
                color: #a3a3a3;
            }
            .num {
                color: $title-color;
            }
        }
    }

    .item-bottom {
        margin-top: 30rpx;
        width: 100%;
        height: 90rpx;
        border-top: 2rpx solid #ececec;

        .total-price {
            color: $title-color;
            .price {
                margin-left: 10rpx;
                color: $price-color;
            }
        }

        .btn-bg {
            margin-left: 10rpx;
            overflow: hidden;
            .btn {
                font-size: 26rpx;
                width: 140rpx;
                height: 50rpx;
                line-height: 50rpx;
                padding: 0 10rpx;
                text-align: center;
                color: white !important;
                background: $theme-color;
                border-radius: 10rpx;
            }
            .btext {
                color: $theme-color;
            }
        }
    }
}
.orderImg {
    width: 176rpx;
    height: 176rpx;
    border-radius: 10rpx;
}
.wrap-order-status {
    position: sticky;
    left: 0;
    width: 100%;
    overflow: hidden;
    height: 100rpx;
    background: white;
    z-index: 10;
    flex-wrap: wrap;

    .status-item {
        flex: 1;
        height: 100rpx;
        overflow: hidden;

        > view {
            display: inline-block;
            height: 100rpx !important;
            line-height: 100rpx;
            box-sizing: border-box;
            border-bottom: 6rpx solid white;
        }

        .active {
            border-color: $theme-color;
        }
    }
}
.card {
    width: 100%;
    background: #fff;
    border-radius: 20rpx;
    padding: 14rpx 24rpx;
    box-sizing: border-box;
    margin: 20rpx 0;
}
.model {
    width: 90%;
    background: white;
    margin: 0 auto;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 999;
    text-align: center;
    padding: 0 50rpx;
    border-radius: 20rpx;
    box-sizing: border-box;
    &-tit {
        width: 180rpx;
    }
    &-text {
        line-height: 1.3;
        flex: 1;
    }
    &-title {
        font-size: 36rpx;
        color: #333333;
        font-weight: bold;
        padding: 45rpx 0 0 0;
    }
    &-content {
        font-size: 30rpx;
        color: #333333;
        padding: 30rpx 20rpx;
        line-height: 1.4;
        text-align: left;
        position: relative;
    }
    &-upimage,
    &-image {
        width: 162rpx;
        height: 162rpx;
        border-radius: 10rpx;
        position: relative;
        image {
            width: 100%;
            height: 100%;
        }
    }
    &-upAgin {
        width: 162rpx;
        height: 162rpx;
        background: rgba(0, 0, 0, 0.4);
        border-radius: 10rpx;
        color: #fff;
        position: absolute;
        top: 0;
        left: 0;

        > image {
            width: 63.66rpx;
            height: 58.36rpx;
        }
        .again {
            line-height: 1.4rem;
        }
    }
    &-textarea {
        width: 100%;
        margin: 20rpx 0;
        padding: 20rpx;
        border-radius: 10rpx;
        box-sizing: border-box;
        background: #f5f5f5;
    }
    &-length {
        position: absolute;
        right: 40rpx;
        bottom: 80rpx;
        font-size: 24rpx;
        color: #999999;
    }
    &-btns {
        justify-content: space-around;
        padding: 10rpx 0 40rpx 0;
    }
    &-btnN {
        color: #666666;
        background: #ececec;
    }
    &-btnY {
        color: white;
        background: linear-gradient(90deg, #5d64ca 0%, #6f9bdf 100%);
    }
    &-btnN,
    &-btnY {
        width: 200rpx;
        height: 68rpx;
        line-height: 68rpx;
        border-radius: 38rpx;
    }
}
.mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 998;
}
.col {
    color: $theme-color;
}
</style>
